<template>
  <div class="father">
    <div class="head">
      <div class="item">
        <router-link to="/r_search" width="100%" height="100%">
          <el-input
            :placeholder= "placeholders"
            prefix-icon="el-icon-search"
            v-model="input">
          </el-input>
        </router-link>
      </div>
      </div>
    <div class="body">
      <div class="left">
        <p :class="{ left_cilck: type == '新品' }" @click="toDetails('新品')">
          新品
        </p>
        <p :class="{ left_cilck: type == '手机' }" @click="toDetails('手机')">
          手机
        </p>
        <p :class="{ left_cilck: type == '穿戴' }" @click="toDetails('穿戴')">
          穿戴
        </p>
        <p :class="{ left_cilck: type == '平板' }" @click="toDetails('平板')">
          平板
        </p>
        <p :class="{ left_cilck: type == '笔记本' }" @click="toDetails('笔记本')">
          笔记本
        </p>
        <p :class="{ left_cilck: type == '台显打印' }" @click="toDetails('台显打印')">
          台显打印
        </p>
        <p :class="{ left_cilck: type == '耳机音响' }" @click="toDetails('耳机音响')">
          耳机音响
        </p>
        <p :class="{ left_cilck: type == '智慧屏' }" @click="toDetails('智慧屏')">
          智慧屏
        </p>
        <p>智能家居</p>
        <p>出行车品</p>
        <p>数码配件</p>
        <p>华为智选</p>
        <p>华为服务</p>
        <p>数字内容</p>
        <p>商用终端</p>
        <p>家用电器</p>
        <p>智能家装</p>
        <p>运动户外</p>
        <p>家庭影音</p>
        <p>个护健康</p>
        <p>美食酒饮</p>
        <p>教育玩具</p>
        <p>医疗保健</p>
      </div>
      <div class="right" v-if="type == '新品'">
        <div class="box">
          <h4>手机新品</h4>
          <div class="sj">
            <router-link to="/Product2">
              <div class="demo">
                <img
                  src="https://res.vmallres.com/pimages//uomcdn/CN/pms/202310/gbom/6942103111426/group//428_428_5E230C62BD184D97ED55EAB0AF16885D.png"
                  alt=""
                />
                <p>nova 11 SE</p>
              </div>
            </router-link>
            <router-link to="/Product">
              <div class="demo">
                <img
                  src="https://res.vmallres.com/pimages//uomcdn/CN/pms/202309/gbom/6942103109621/group//428_428_83C1A1DD309DD9E2DD382A75596B74DF.png"
                  alt=""
                />
                <p>Mate 60 RS <br />非凡大师</p>
              </div>
            </router-link>
            <div class="demo">
              <img
                src="https://res.vmallres.com/pimages//uomcdn/CN/pms/202309/gbom/6942103109584/group//428_428_517CA5E87A566C59C659B54A3807640A.png"
                alt=""
              />
              <p>Mate 60 <br />Pro+</p>
            </div>
          </div>
          <div class="sj">
            <div class="demo">
              <img
                src="https://res.vmallres.com/pimages//uomcdn/CN/pms/202309/gbom/6942103109485/group//428_428_81B39CE7196B40B5171CFFF4BC8910A1.png"
                alt=""
              />
              <p>Mate 60 Pro</p>
            </div>
            <div class="demo">
              <img
                src="https://ms.bdimg.com/pacific/0/pic/-1170947291_1145215301.jpg?x=0&y=0&h=320&w=480&vh=320.00&vw=480.00&oh=320.00&ow=480.00"
                alt=""
              />
              <p>Mate 60</p>
            </div>
            <div class="demo">
              <img
                src="https://res.vmallres.com/pimages//uomcdn/CN/pms/202309/gbom/6942103107313/group//428_428_4D097DEC12A02157ADEEB4CB3442F446.png"
                alt=""
              />
              <p>Mate x5</p>
            </div>
          </div>
        </div>
        <div class="box">
          <!-- ---------------------------------- -->
          <h4>穿戴新品</h4>
          <div class="sj">
            <div class="demo">
              <img
                src="https://ms.bdimg.com/pacific/0/pic/-1170947291_1145215301.jpg?x=0&y=0&h=320&w=480&vh=320.00&vw=480.00&oh=320.00&ow=480.00"
                alt=""
              />
              <p>Mate x5</p>
            </div>
            <div class="demo">
              <img
                src="https://res.vmallres.com/pimages/uomcdn/CN/pms/202309/gbom/6942103103650/800_800_16BB4592008F272F5CD34F46BA157EDFmp.png"
                alt=""
              />
              <p>nova 11 SE</p>
            </div>
            <div class="demo">
              <img
                src="https://res.vmallres.com/pimages/uomcdn/CN/pms/202311/displayProduct/29010100962/group/800_800_0434D96190D7459621028640C7E5FEB7.jpg"
                alt=""
              />
              <p>nova 11 SE</p>
            </div>
          </div>
          <div class="sj">
            <div class="demo">
              <img
                src="https://res.vmallres.com/pimages/uomcdn/CN/pms/202311/displayProduct/29010100962/group/800_800_8B435A41ECC6E47E59902C2561CEBE6D.jpg"
                alt=""
              />
              <p>nova 11 SE</p>
            </div>
            <div class="demo">
              <img
                src="https://ms.bdimg.com/pacific/0/pic/-1170947291_1145215301.jpg?x=0&y=0&h=320&w=480&vh=320.00&vw=480.00&oh=320.00&ow=480.00"
                alt=""
              />
              <p>nova 11 SE</p>
            </div>
            <div class="demo">
              <img
                src="https://ms.bdimg.com/pacific/0/pic/-1170947291_1145215301.jpg?x=0&y=0&h=320&w=480&vh=320.00&vw=480.00&oh=320.00&ow=480.00"
                alt=""
              />
              <p>nova 11 SE</p>
            </div>
          </div>
        </div>
        <div class="box">
          <h4>平板新品</h4>
          <div class="sj">
            <div class="demo">
              <img
                src="https://res.vmallres.com/pimages//uomcdn/CN/pms/202311/gbom/6942103108945//800_800_92CCF0EFA7F5514141C3C396D6487381mp.png
"
                alt=""
              />
              <p>nova 11 SE</p>
            </div>
          </div>
        </div>
      </div>
      <!-- ----------------手机 -->
      <div class="right" v-if="type == '手机'">
        <div class="lb">
          <img src="https://res.vmallres.com/pimages/cmscdn/CN/2023-11/4cd71aaf4b8f4bd1b0f6bc03923dfbb6.jpg" alt="">
        </div>
        <div class="box">
          <!-- Mate 系列< -->
          <h4>Mate 系列</h4>
          <div class="sj">
						<router-link to="/Product">
							<div class="demo">
							  <img
							    src="https://res.vmallres.com/pimages//uomcdn/CN/pms/202309/gbom/6942103109621/group//428_428_3E1453BF97C5DC71CCC3F815719FC003.png"
							    alt=""
							  />
							  <p>Mate 60 Rs <br />非凡大师</p>
							</div>
						</router-link>
            <div class="demo">
              <img
                src="https://res.vmallres.com/pimages//uomcdn/CN/pms/202311/gbom/6942103110443//800_800_65B015184526AD16DD2E315244FA6F12mp.png"
                alt=""
              />
              <p>Mate x5 <br />同心套装</p>
            </div>
            <div class="demo">
              <img
                src="https://res.vmallres.com/pimages//uomcdn/CN/pms/202311/gbom/6942103109270//800_800_9612CC14D60B15B40B8E8A1DC5A3FF09mp.png"
                alt=""
              />
              <p>Mate 60 Pro <br />同心套装</p>
            </div>
          </div>
          <div class="sj">
            <div class="demo">
              <img
                src="https://res.vmallres.com/pimages//uomcdn/CN/pms/202309/gbom/6942103109584//800_800_D5053BB8A6FECB4906EC5869E78CEEC5mp.png"
                alt=""
              />
              <p>Mate 60 Pro+</p>
            </div>
            <div class="demo">
              <img
                src="https://res.vmallres.com/pimages//uomcdn/CN/pms/202309/gbom/6942103107313/group//428_428_80028EB21756F593209827DCE5F56033.png"
                alt=""
              />
              <p>Mate 60 Pro</p>
            </div>
            <div class="demo">
              <img
                src="https://ms.bdimg.com/pacific/0/pic/-1170947291_1145215301.jpg?x=0&y=0&h=320&w=480&vh=320.00&vw=480.00&oh=320.00&ow=480.00"
                alt=""
              />
              <p>Mate 60 x5</p>
            </div>
          </div>
          <div class="sj">
              <div class="demo">
                <img
                  src="https://res.vmallres.com/pimages//uomcdn/CN/pms/202209/gbom/6941487279968//428_428_120BEA96411009C5E29C789264936A07mp_tds.png"
                  alt=""
                />
                <p>Mate 60 Pro+</p>
              </div>
              <div class="demo">
                <img
                  src="https://ms.bdimg.com/pacific/0/pic/-1170947291_1145215301.jpg?x=0&y=0&h=320&w=480&vh=320.00&vw=480.00&oh=320.00&ow=480.00"
                  alt=""
                />
                <p>Mate x3</p>
              </div>
              <div class="demo">
                <img
                  src="https://res.vmallres.com/pimages//uomcdn/CN/pms/202209/gbom/6941487279968/group//428_428_A1DE1EE5E2C2DD9A1C728F03EBF602A6_tds.png"
                  alt=""
                />
                <p>Mate 50</p>
              </div>
          </div>
          <div class="sj">
            <div class="demo">
                    <img
                      src="https://ms.bdimg.com/pacific/0/pic/-1170947291_1145215301.jpg?x=0&y=0&h=320&w=480&vh=320.00&vw=480.00&oh=320.00&ow=480.00"
                      alt=""
                    />
                    <p>Mate 50 Pro</p>
                  </div>
                  <div class="demo">
                    <img
                      src="https://ms.bdimg.com/pacific/0/pic/-1170947291_1145215301.jpg?x=0&y=0&h=320&w=480&vh=320.00&vw=480.00&oh=320.00&ow=480.00"
                      alt=""
                    />
                    <p>Mate Xs 2</p>
                  </div>
                  <div class="demo">
                    <img
                      src="https://ms.bdimg.com/pacific/0/pic/-1170947291_1145215301.jpg?x=0&y=0&h=320&w=480&vh=320.00&vw=480.00&oh=320.00&ow=480.00"
                      alt=""
                    />
                    <p>Mate 50E</p>
                  </div>
          </div>
        </div>
        <!-- -------------------------------- -->
        <div class="box">
          <h4>P 系列</h4>
          <div class="sj">
            <div class="demo">
              <img
                src="https://ms.bdimg.com/pacific/0/pic/-1170947291_1145215301.jpg?x=0&y=0&h=320&w=480&vh=320.00&vw=480.00&oh=320.00&ow=480.00"
                alt=""
              />
              <p>P60</p>
            </div>
            <div class="demo">
              <img
                src="https://ms.bdimg.com/pacific/0/pic/-1170947291_1145215301.jpg?x=0&y=0&h=320&w=480&vh=320.00&vw=480.00&oh=320.00&ow=480.00"
                alt=""
              />
              <p>P60 Pro</p>
            </div>
            <div class="demo">
              <img
                src="https://ms.bdimg.com/pacific/0/pic/-1170947291_1145215301.jpg?x=0&y=0&h=320&w=480&vh=320.00&vw=480.00&oh=320.00&ow=480.00"
                alt=""
              />
              <p>P60 Art</p>
            </div>
          </div>
          <div class="sj">
            <div class="demo">
              <img
                src="https://ms.bdimg.com/pacific/0/pic/-1170947291_1145215301.jpg?x=0&y=0&h=320&w=480&vh=320.00&vw=480.00&oh=320.00&ow=480.00"
                alt=""
              />
              <p>P50 Pocket</p>
            </div>
            <!-- <div class="demo">
              <img
                src="https://ms.bdimg.com/pacific/0/pic/-1170947291_1145215301.jpg?x=0&y=0&h=320&w=480&vh=320.00&vw=480.00&oh=320.00&ow=480.00"
                alt=""
              />
              <p>nova 11 SE</p>
            </div> -->
            <!-- <div class="demo">
              <img
                src="https://ms.bdimg.com/pacific/0/pic/-1170947291_1145215301.jpg?x=0&y=0&h=320&w=480&vh=320.00&vw=480.00&oh=320.00&ow=480.00"
                alt=""
              />
              <p>nova 11 SE</p>
            </div> -->
          </div>
        </div>
        <div class="box">
          <h4>平板新品</h4>
          <div class="sj">
            <div class="demo">
              <img
                src="https://ms.bdimg.com/pacific/0/pic/-1170947291_1145215301.jpg?x=0&y=0&h=320&w=480&vh=320.00&vw=480.00&oh=320.00&ow=480.00"
                alt=""
              />
              <p>nova 11 SE</p>
            </div>
            <div class="demo">
              <img
                src="https://ms.bdimg.com/pacific/0/pic/-1170947291_1145215301.jpg?x=0&y=0&h=320&w=480&vh=320.00&vw=480.00&oh=320.00&ow=480.00"
                alt=""
              />
              <p>nova 11 SE</p>
            </div>
            <div class="demo">
              <img
                src="https://ms.bdimg.com/pacific/0/pic/-1170947291_1145215301.jpg?x=0&y=0&h=320&w=480&vh=320.00&vw=480.00&oh=320.00&ow=480.00"
                alt=""
              />
              <p>nova 11 SE</p>
            </div>
          </div>
          <div class="sj">
            <div class="demo">
              <img
                src="https://ms.bdimg.com/pacific/0/pic/-1170947291_1145215301.jpg?x=0&y=0&h=320&w=480&vh=320.00&vw=480.00&oh=320.00&ow=480.00"
                alt=""
              />
              <p>nova 11 SE</p>
            </div>
            <div class="demo">
              <img
                src="https://ms.bdimg.com/pacific/0/pic/-1170947291_1145215301.jpg?x=0&y=0&h=320&w=480&vh=320.00&vw=480.00&oh=320.00&ow=480.00"
                alt=""
              />
              <p>nova 11 SE</p>
            </div>
            <div class="demo">
              <img
                src="https://ms.bdimg.com/pacific/0/pic/-1170947291_1145215301.jpg?x=0&y=0&h=320&w=480&vh=320.00&vw=480.00&oh=320.00&ow=480.00"
                alt=""
              />
              <p>nova 11 SE</p>
            </div>
          </div>
        </div>
      </div>
      <!-- 穿戴 -->
      <div class="right" v-if="type == '穿戴'">
        <div class="lb">
          <img src="https://res.vmallres.com/pimages/cmscdn/CN/2023-09/eebe7df0bd544d5e91f5455b79c957da.jpg" alt="">
        </div>
        <div class="box">
          <!-- Mate 系列< -->
          <h4>爆款推荐</h4>
          <div class="sj">
            <div class="demo">
              <img
                src="https://res.vmallres.com/pimages//uomcdn/CN/pms/202309/gbom/6942103104978/428_428_A561860375C82F6E01E21DA040D64CE1mp.png"
                alt=""
              />
              <p>Mate 60 Rs <br />非凡大师</p>
            </div>
            <div class="demo">
              <img
                src="https://res.vmallres.com/pimages//uomcdn/CN/pms/202305/gbom/6941487291205/428_428_C843FF4CC5559FE993FB1A8A86BD1EAFmp.png"
                alt=""
              />
              <p>Mate x5 <br />同心套装</p>
            </div>
            <div class="demo">
            <img src="https://res.vmallres.com/pimages//uomcdn/CN/pms/202305/gbom/6941487291236/428_428_A059155490D256984702B0C7369DFC29mp.png" alt="">
              <p>Mate 60 Pro <br />同心套装</p>
            </div>
          </div>
          <div class="sj">
            <div class="demo">
              <img
                src="https://res.vmallres.com/pimages//uomcdn/CN/pms/202212/gbom/6941487249428/428_428_E6EDC922C976DA38E1878B7FEED3F90Amp_tds.png"
                alt=""
              />
              <p>Mate 60 Pro+</p>
            </div>
            <div class="demo">
              <img
                src="https://res.vmallres.com/pimages//uomcdn/CN/pms/202305/gbom/6941487291588/428_428_40B8BF2A06E35EDAAA1C7D3270849C10mp.png"
                alt=""
              />
              <p>Mate 60 Pro</p>
            </div>
            <div class="demo">
              <img
                src="https://res.vmallres.com/pimages//uomcdn/CN/pms/202207/gbom/6941487257164/428_428_F4485F7A0D1F056A44187E36B9BC4677mp_tds.png"
                alt=""
              />
              <p>Mate 60 x5</p>
            </div>
          </div>
        </div>
        <!-- -------------------------------- 穿戴-->
        <div class="box">
          <h4>儿童系列</h4>
          <div class="sj">
            <div class="demo">
              <img
                src="https://res.vmallres.com/pimages//uomcdn/CN/pms/202212/gbom/6941487284658/428_428_18FA27F2A8872CDDD38B60F5F66BDD84mp_tds.png"
                alt=""
              />
              <p>P60</p>
            </div>
            <div class="demo">
              <img
                src="https://res.vmallres.com/pimages//uomcdn/CN/pms/202212/gbom/6941487284672/428_428_ACFCB7AB418E8FCF9CDA951B47FB7165mp_tds.png"
                alt=""
              />
              <p>P60 Pro</p>
            </div>
            <div class="demo">
              <img
                src="https://res.vmallres.com/pimages//uomcdn/CN/pms/202206/gbom/6941487218424/428_428_1B7A027B69E849DD868CCC2AF0A1AC95mp_tds2.png"
                alt=""
              />
              <p>P50 Pocket</p>
          </div>
          </div>
        </div>
        <div class="box">
          <h4>WATCH 系列</h4>
          <div class="sj">
            <div class="demo">
              <img
                src="https://ms.bdimg.com/pacific/0/pic/-1170947291_1145215301.jpg?x=0&y=0&h=320&w=480&vh=320.00&vw=480.00&oh=320.00&ow=480.00"
                alt=""
              />
              <p>nova 11 SE</p>
            </div>
            <div class="demo">
              <img
                src="https://ms.bdimg.com/pacific/0/pic/-1170947291_1145215301.jpg?x=0&y=0&h=320&w=480&vh=320.00&vw=480.00&oh=320.00&ow=480.00"
                alt=""
              />
              <p>nova 11 SE</p>
            </div>
            <div class="demo">
              <img
                src="https://ms.bdimg.com/pacific/0/pic/-1170947291_1145215301.jpg?x=0&y=0&h=320&w=480&vh=320.00&vw=480.00&oh=320.00&ow=480.00"
                alt=""
              />
              <p>nova 11 SE</p>
            </div>
          </div>
          <div class="sj">
            <div class="demo">
              <img
                src="https://ms.bdimg.com/pacific/0/pic/-1170947291_1145215301.jpg?x=0&y=0&h=320&w=480&vh=320.00&vw=480.00&oh=320.00&ow=480.00"
                alt=""
              />
              <p>nova 11 SE</p>
            </div>
            <div class="demo">
              <img
                src="https://ms.bdimg.com/pacific/0/pic/-1170947291_1145215301.jpg?x=0&y=0&h=320&w=480&vh=320.00&vw=480.00&oh=320.00&ow=480.00"
                alt=""
              />
              <p>nova 11 SE</p>
            </div>
            <div class="demo">
              <img
                src="https://ms.bdimg.com/pacific/0/pic/-1170947291_1145215301.jpg?x=0&y=0&h=320&w=480&vh=320.00&vw=480.00&oh=320.00&ow=480.00"
                alt=""
              />
              <p>nova 11 SE</p>
            </div>
          </div>
        </div>
      </div>
      <!-- 平板 -->

      <div class="right" v-if="type == '平板'">
        <div class="lb">
          <img src="https://res.vmallres.com/pimages/cmscdn/CN/2023-11/c111faeefe0b40b789c84e32a11f575e.jpg" alt="">
        </div>
        <div class="box">
          <!-- Mate 系列< -->
          <h4>爆款推荐</h4>
          <div class="sj">
            <div class="demo">
              <img
                src="https://res.vmallres.com/cmscdn/CN/2023-08/ce7ed0a6f1d34661b9d012029855952f.png.50.webp"
                alt=""
              />
              <p>MateBook E Go 2023款</p>
            </div>
            <div class="demo">
              <img
                src="https://res.vmallres.com/pimages//uomcdn/CN/pms/202305/gbom/6942103106378/428_428_13C73D46BA3379FBEA7A3F7D7523C2A1mp.png"
                alt=""
              />
              <p>Mate x5 </p>
            </div>
            <div class="demo">
            <img src="https://res.vmallres.com/pimages//uomcdn/CN/pms/202310/gbom/6942103112065/428_428_D0E1F34F0496D3184E338E9DDC82BF19mp.png" alt="">
              <p>MateBook E 2023款</p>
            </div>
          </div>
        </div>
        <!-- -------------------------------- 穿戴-->
        <div class="box">
          <h4>MatePad Pro系列</h4>
          <div class="sj">
            <div class="demo">
              <img
                src="https://res.vmallres.com/cmscdn/CN/2023-09/e4010f9351a94cc0887808ffcf82b322.png.50.webp"
                alt=""
              />
              <p>MatePad Pro 13.2</p>
            </div>
            <div class="demo">
              <img
                src="https://res.vmallres.com/cmscdn/CN/2023-04/add45b0afdfc4d63b2e28ba3f4628246.jpg.50.webp"
                alt=""
              />
              <p>MatePad Pro 12.6</p>
            </div>
            <div class="demo">
              <img
                src="https://res.vmallres.com/cmscdn/CN/2023-04/d1098065d3af4031abca401c5a5c32e0.png.50.webp"
                alt=""
              />
              <p>MatePad Pro 11</p>
          </div>
          </div>
        </div>
        <div class="box">
          <h4>WATCH 系列</h4>
          <div class="sj">
            <div class="demo">
              <img
                src="https://ms.bdimg.com/pacific/0/pic/-1170947291_1145215301.jpg?x=0&y=0&h=320&w=480&vh=320.00&vw=480.00&oh=320.00&ow=480.00"
                alt=""
              />
              <p>nova 11 SE</p>
            </div>
            <div class="demo">
              <img
                src="https://ms.bdimg.com/pacific/0/pic/-1170947291_1145215301.jpg?x=0&y=0&h=320&w=480&vh=320.00&vw=480.00&oh=320.00&ow=480.00"
                alt=""
              />
              <p>nova 11 SE</p>
            </div>
            <div class="demo">
              <img
                src="https://ms.bdimg.com/pacific/0/pic/-1170947291_1145215301.jpg?x=0&y=0&h=320&w=480&vh=320.00&vw=480.00&oh=320.00&ow=480.00"
                alt=""
              />
              <p>nova 11 SE</p>
            </div>
          </div>
          <div class="sj">
            <div class="demo">
              <img
                src="https://ms.bdimg.com/pacific/0/pic/-1170947291_1145215301.jpg?x=0&y=0&h=320&w=480&vh=320.00&vw=480.00&oh=320.00&ow=480.00"
                alt=""
              />
              <p>nova 11 SE</p>
            </div>
            <div class="demo">
              <img
                src="https://ms.bdimg.com/pacific/0/pic/-1170947291_1145215301.jpg?x=0&y=0&h=320&w=480&vh=320.00&vw=480.00&oh=320.00&ow=480.00"
                alt=""
              />
              <p>nova 11 SE</p>
            </div>
            <div class="demo">
              <img
                src="https://ms.bdimg.com/pacific/0/pic/-1170947291_1145215301.jpg?x=0&y=0&h=320&w=480&vh=320.00&vw=480.00&oh=320.00&ow=480.00"
                alt=""
              />
              <p>nova 11 SE</p>
            </div>
          </div>
        </div>
      </div>
      <!-- 笔记本 -->
      <div class="right" v-if="type == '笔记本'">
        <div class="lb">
          <img src="https://res.vmallres.com/pimages/cmscdn/CN/2023-10/1907413cf6ba41c2b2697f48284c5d0e.jpg" alt="">
        </div>
        <div class="box">
          <!-- Mate 系列< -->
          <h4>爆款推荐</h4>
          <div class="sj">
            <div class="demo">
              <img
                src="https://res.vmallres.com/pimages//uomcdn/CN/pms/202311/gbom/6942103113666/428_428_38F93EFBB95746C8A4D3FD66928CE259mp.png"
                alt=""
              />
              <p>Mate 60 Rs <br />非凡大师</p>
            </div>
            <div class="demo">
              <img
                src="https://res.vmallres.com/pimages//uomcdn/CN/pms/202311/gbom/6942103113666/428_428_38F93EFBB95746C8A4D3FD66928CE259mp.png"
                alt=""
              />
              <p>Mate x5 <br />同心套装</p>
            </div>
            <div class="demo">
            <img src="https://res.vmallres.com/pimages//uomcdn/CN/pms/202307/gbom/6942103105975/428_428_2FEB0A89E692BB987575E36820B8E237mp.png" alt="">
              <p>Mate 60 Pro <br />同心套装</p>
            </div>
          </div>
          <div class="sj">
            <div class="demo">
              <img
                src="https://res.vmallres.com/pimages//uomcdn/CN/pms/202207/gbom/6941487272976/428_428_888A5C8BF234C163D91261FB425A9309mp_tds.png"
                alt=""
              />
              <p>Mate 60 Pro+</p>
            </div>
            <div class="demo">
              <img
                src="https://res.vmallres.com/pimages//uomcdn/CN/pms/202207/gbom/6941487272976/428_428_888A5C8BF234C163D91261FB425A9309mp_tds.png"
                alt=""
              />
              <p>Mate 60 Pro</p>
            </div>
            <div class="demo">
              <img
                src="https://res.vmallres.com/pimages//uomcdn/CN/pms/202307/gbom/6942103106125/428_428_3348B1FC7C489DA5930549EB81B39BFCmp.png"
                alt=""
              />
              <p>Mate 60 x5</p>
            </div>
          </div>
        </div>
        <!-- -------------------------------- 穿戴-->
        <div class="box">
          <h4>MateBook X 系列 高端商务</h4>
          <div class="sj">
            <div class="demo">
              <img
                src="https://res.vmallres.com/pimages//uomcdn/CN/pms/202305/gbom/6941487298983/428_428_D0E26838B5B0F6EED5191ED15458C071mp.png"
                alt=""
              />
              <p>P60</p>
            </div>
            <div class="demo">
              <img
                src="https://res.vmallres.com/pimages//uomcdn/CN/pms/202208/gbom/6941487262922/428_428_ED1B4B794725A0C9BCA7DA89F65939CAmp_tds.png"
                alt=""
              />
              <p>P60 Pro</p>
            </div>
            <div class="demo">
              <img
                src="https://res.vmallres.com/pimages//product/6941487215454/428_428_5EDAEE397CEA70F5366F341C263F6ABC4608805DCA31212Emp_tds.png"
                alt=""
              />
              <p>P50 Pocket</p>
          </div>
          </div>
        </div>
        <div class="box">
          <h4>WATCH 系列</h4>
          <div class="sj">
            <div class="demo">
              <img
                src="https://ms.bdimg.com/pacific/0/pic/-1170947291_1145215301.jpg?x=0&y=0&h=320&w=480&vh=320.00&vw=480.00&oh=320.00&ow=480.00"
                alt=""
              />
              <p>nova 11 SE</p>
            </div>
            <div class="demo">
              <img
                src="https://ms.bdimg.com/pacific/0/pic/-1170947291_1145215301.jpg?x=0&y=0&h=320&w=480&vh=320.00&vw=480.00&oh=320.00&ow=480.00"
                alt=""
              />
              <p>nova 11 SE</p>
            </div>
            <div class="demo">
              <img
                src="https://ms.bdimg.com/pacific/0/pic/-1170947291_1145215301.jpg?x=0&y=0&h=320&w=480&vh=320.00&vw=480.00&oh=320.00&ow=480.00"
                alt=""
              />
              <p>nova 11 SE</p>
            </div>
          </div>
          <div class="sj">
            <div class="demo">
              <img
                src="https://ms.bdimg.com/pacific/0/pic/-1170947291_1145215301.jpg?x=0&y=0&h=320&w=480&vh=320.00&vw=480.00&oh=320.00&ow=480.00"
                alt=""
              />
              <p>nova 11 SE</p>
            </div>
            <div class="demo">
              <img
                src="https://ms.bdimg.com/pacific/0/pic/-1170947291_1145215301.jpg?x=0&y=0&h=320&w=480&vh=320.00&vw=480.00&oh=320.00&ow=480.00"
                alt=""
              />
              <p>nova 11 SE</p>
            </div>
            <div class="demo">
              <img
                src="https://ms.bdimg.com/pacific/0/pic/-1170947291_1145215301.jpg?x=0&y=0&h=320&w=480&vh=320.00&vw=480.00&oh=320.00&ow=480.00"
                alt=""
              />
              <p>nova 11 SE</p>
            </div>
          </div>
        </div>
      </div>
      <!-- 台显打印 -->
      <div class="right" v-if="type == '台显打印'">
        <div class="box">
          <!-- ---------------------------------- -->
          <h4>爆款推荐</h4>
          <div class="sj">
            <div class="demo">
              <img
                src="https://res.vmallres.com/pimages//uomcdn/CN/pms/202211/gbom/6941487271788/428_428_4E891F0F5C3195AC9905F338D621297Fmp_tds.png"
                alt=""
              />
              <p>Mate x5</p>
            </div>
            <div class="demo">
              <img
                src="https://res.vmallres.com/pimages//uomcdn/CN/pms/202210/gbom/6941487237746/428_428_D9E84E656C6AAE28878A18CAFB5DFA72mp_tds.png"
                alt=""
              />
              <p>nova 11 SE</p>
            </div>
            <div class="demo">
              <img
                src="https://res.vmallres.com/pimages//uomcdn/CN/pms/202210/gbom/6942103100642/428_428_5F6A0ADEF3722AEE3026EE7DD5457F62mp_tds.png"
                alt=""
              />
              <p>nova 11 SE</p>
            </div>
          </div>
          <div class="sj">
            <div class="demo">
              <img
                src="https://res.vmallres.com/pimages//uomcdn/CN/pms/202211/gbom/6941487298112/428_428_33B9D62538BBAA0C1BBD7039482312AEmp_tds.png"
                alt=""
              />
              <p>nova 11 SE</p>
            </div>
            <div class="demo">
              <img
                src="https://res.vmallres.com/pimages//uomcdn/CN/pms/202211/gbom/6942103101175/428_428_60480505659FDC9E03A47747253FF332mp_tds.png"
                alt=""
              />
              <p>nova 11 SE</p>
            </div>
            <div class="demo">
              <img
                src="https://res.vmallres.com/pimages//uomcdn/CN/pms/202209/gbom/6941487222865/428_428_AA9DBAA797633A14F84309B161392F75mp_tds2.png"
                alt=""
              />
              <p>nova 11 SE</p>
            </div>
          </div>
        </div>
        <div class="box">
          <h4>台式机和一体机</h4>
          <div class="sj">
            <div class="demo">
              <img
                src="https://res.vmallres.com/pimages//uomcdn/CN/pms/202211/gbom/6941487298112/428_428_33B9D62538BBAA0C1BBD7039482312AEmp_tds.png"
                alt=""
              />
              <p>nova 11 SE</p>
            </div>
            <div class="demo">
              <img
                src="https://res.vmallres.com/pimages//uomcdn/CN/pms/202211/gbom/6942103101175/428_428_60480505659FDC9E03A47747253FF332mp_tds.png"
                alt=""
              />
              <p>Mate 60 RS <br />非凡大师</p>
            </div>
            <div class="demo">
              <img
                src="https://res.vmallres.com/pimages//uomcdn/CN/pms/202309/gbom/6942103109584/group//428_428_517CA5E87A566C59C659B54A3807640A.png"
                alt=""
              />
              <p>Mate 60 <br />Pro+</p>
            </div>
          </div>
        </div>
        <div class="box">
          <h4>平板新品</h4>
          <div class="sj">
            <div class="demo">
              <img
                src="https://res.vmallres.com/pimages//uomcdn/CN/pms/202311/gbom/6942103108945//800_800_92CCF0EFA7F5514141C3C396D6487381mp.png
"
                alt=""
              />
              <p>nova 11 SE</p>
            </div>
          </div>
        </div>
      </div>
         <!-- 笔记本 -->
         <div class="right" v-if="type == '耳机音响'">
        <div class="lb">
          <img src="https://res.vmallres.com/pimages/cmscdn/CN/2023-11/6422172cc44c4e02a55e7eee1005cdfc.jpg" alt="">
        </div>
        <div class="box">
          <!-- Mate 系列< -->
          <h4>爆款推荐</h4>
          <div class="sj">
            <div class="demo">
              <img
                src="https://res.vmallres.com/pimages//uomcdn/CN/pms/202309/gbom/6942103106217/428_428_BA91CA59194C170E813C8B5208710D9Fmp.png"
                alt=""
              />
              <p>Mate 60 Rs <br />非凡大师</p>
            </div>
            <div class="demo">
              <img
                src="https://res.vmallres.com/pimages//uomcdn/CN/pms/202309/gbom/6942103106422/428_428_2C963982778EE11E8285B03253517B2Amp.png"
                alt=""
              />
              <p>Mate x5 <br />同心套装</p>
            </div>
            <div class="demo">
            <img src="https://res.vmallres.com/pimages//uomcdn/CN/pms/202311/gbom/6942103101342/428_428_60E908FB0CE2EEC297BDE9C12B05CEF7mp.png" alt="">
              <p>Mate 60 Pro <br />同心套装</p>
            </div>
          </div>
          <div class="sj">
            <div class="demo">
              <img
                src="https://res.vmallres.com/pimages//uomcdn/CN/pms/202303/gbom/6941487277445/428_428_E5804512E377506472C0E7429CCB597Amp.png"
                alt=""
              />
              <p>Mate 60 Pro+</p>
            </div>
            <div class="demo">
              <img
                src="https://res.vmallres.com/cmscdn/CN/2023-08/ca1e169c102f41b4913159b78e252dc8.png.50.webp"
                alt=""
              />
              <p>Mate 60 Pro</p>
            </div>
            <div class="demo">
              <img
                src="https://res.vmallres.com/pimages//uomcdn/CN/pms/202311/gbom/6942103108365/428_428_740D5A8D4A22D7BAF7A5071A947734B7mp.png"
                alt=""
              />
              <p>Mate 60 x5</p>
            </div>
          </div>
        </div>
        <!-- -------------------------------- 穿戴-->
        <div class="box">
          <h4>FreeBuds 系列</h4>
          <div class="sj">
            <div class="demo">
              <img
                src="https://res.vmallres.com/pimages//uomcdn/CN/pms/202309/gbom/6942103106194/428_428_F99CA04A2162E1068877EB11945D199Emp.png"
                alt=""
              />
              <p>P60</p>
            </div>
            <div class="demo">
              <img
                src="https://res.vmallres.com/cmscdn/CN/2023-08/6ff85cee58384b92a3f014a944d535d5.png.50.webp"
                alt=""
              />
              <p>P60 Pro</p>
            </div>
            <div class="demo">
              <img
                src="https://res.vmallres.com/pimages//uomcdn/CN/pms/202308/gbom/6942103106996/428_428_C6758C7A218542B4F56039BDC2BB2558mp.png"
                alt=""
              />
              <p>P50 Pocket</p>
          </div>
          </div>
        </div>
        <div class="box">
          <h4>WATCH 系列</h4>
          <div class="sj">
            <div class="demo">
              <img
                src="https://ms.bdimg.com/pacific/0/pic/-1170947291_1145215301.jpg?x=0&y=0&h=320&w=480&vh=320.00&vw=480.00&oh=320.00&ow=480.00"
                alt=""
              />
              <p>nova 11 SE</p>
            </div>
            <div class="demo">
              <img
                src="https://ms.bdimg.com/pacific/0/pic/-1170947291_1145215301.jpg?x=0&y=0&h=320&w=480&vh=320.00&vw=480.00&oh=320.00&ow=480.00"
                alt=""
              />
              <p>nova 11 SE</p>
            </div>
            <div class="demo">
              <img
                src="https://ms.bdimg.com/pacific/0/pic/-1170947291_1145215301.jpg?x=0&y=0&h=320&w=480&vh=320.00&vw=480.00&oh=320.00&ow=480.00"
                alt=""
              />
              <p>nova 11 SE</p>
            </div>
          </div>
          <div class="sj">
            <div class="demo">
              <img
                src="https://ms.bdimg.com/pacific/0/pic/-1170947291_1145215301.jpg?x=0&y=0&h=320&w=480&vh=320.00&vw=480.00&oh=320.00&ow=480.00"
                alt=""
              />
              <p>nova 11 SE</p>
            </div>
            <div class="demo">
              <img
                src="https://ms.bdimg.com/pacific/0/pic/-1170947291_1145215301.jpg?x=0&y=0&h=320&w=480&vh=320.00&vw=480.00&oh=320.00&ow=480.00"
                alt=""
              />
              <p>nova 11 SE</p>
            </div>
            <div class="demo">
              <img
                src="https://ms.bdimg.com/pacific/0/pic/-1170947291_1145215301.jpg?x=0&y=0&h=320&w=480&vh=320.00&vw=480.00&oh=320.00&ow=480.00"
                alt=""
              />
              <p>nova 11 SE</p>
            </div>
          </div>
        </div>
      </div>
              <!-- 笔记本 -->
              <div class="right" v-if="type == '智慧屏'">
        <div class="lb">
          <img src="https://res.vmallres.com/pimages/cmscdn/CN/2023-10/7d0be5dcefaa4431908a8d60cfc4c58f.jpg" alt="">
        </div>
        <div class="box">
          <!-- Mate 系列< -->
          <h4>爆款推荐</h4>
          <div class="sj">
            <div class="demo">
              <img
                src="https://res.vmallres.com/pimages//uomcdn/CN/pms/202311/gbom/6942103109218/428_428_C86979F570AA9A67B645A6C7DFA955FEmp.png"
                alt=""
              />
              <p>Mate 60 Rs <br />非凡大师</p>
            </div>
            <div class="demo">
              <img
                src="https://res.vmallres.com/pimages//uomcdn/CN/pms/202311/gbom/6942103109218/428_428_C86979F570AA9A67B645A6C7DFA955FEmp.png"
                alt=""
              />
              <p>Mate x5 <br />同心套装</p>
            </div>
            <div class="demo">
            <img src="https://res.vmallres.com/pimages//uomcdn/CN/pms/202305/gbom/6942103100260/428_428_1D6E69F8584AA46FF7C4BBECD78FEB1Emp.png" alt="">
              <p>Mate 60 Pro <br />同心套装</p>
            </div>
          </div>
          <div class="sj">
            <div class="demo">
              <img
                src="https://res.vmallres.com/pimages//uomcdn/CN/pms/202310/gbom/6942103104329/428_428_65A3DE8A394DD0D87D2916D1480F9728mp.png"
                alt=""
              />
              <p>Mate 60 Pro+</p>
            </div>
            <div class="demo">
              <img
                src="https://res.vmallres.com/pimages//uomcdn/CN/pms/202310/gbom/6942103104329/428_428_65A3DE8A394DD0D87D2916D1480F9728mp.png"
                alt=""
              />
              <p>Mate 60 Pro</p>
            </div>
            <div class="demo">
              <img
                src="https://res.vmallres.com/pimages//uomcdn/CN/pms/202310/gbom/6942103104329/428_428_65A3DE8A394DD0D87D2916D1480F9728mp.png"
                alt=""
              />
              <p>Mate 60 x5</p>
            </div>
          </div>
        </div>
        <!-- -------------------------------- 穿戴-->
        <div class="box">
          <h4>FreeBuds 系列</h4>
          <div class="sj">
            <div class="demo">
              <img
                src="https://res.vmallres.com/pimages//uomcdn/CN/pms/202209/gbom/6941487277766/428_428_5F4C887C31982515D55971BD369AD875mp_tds.png"
                alt=""
              />
              <p>P60</p>
            </div>
            <div class="demo">
              <img
                src="https://res.vmallres.com/pimages//uomcdn/CN/pms/202310/gbom/6942103104329/428_428_65A3DE8A394DD0D87D2916D1480F9728mp.png"
                alt=""
              />
              <p>P60 Pro</p>
            </div>
            <div class="demo">
              <img
                src="https://res.vmallres.com/pimages//uomcdn/CN/pms/202308/gbom/6942103106996/428_428_C6758C7A218542B4F56039BDC2BB2558mp.png"
                alt=""
              />
              <p>P50 Pocket</p>
          </div>
          </div>
        </div>
        <div class="box">
          <h4>WATCH 系列</h4>
          <div class="sj">
            <div class="demo">
              <img
                src="https://ms.bdimg.com/pacific/0/pic/-1170947291_1145215301.jpg?x=0&y=0&h=320&w=480&vh=320.00&vw=480.00&oh=320.00&ow=480.00"
                alt=""
              />
              <p>nova 11 SE</p>
            </div>
            <div class="demo">
              <img
                src="https://ms.bdimg.com/pacific/0/pic/-1170947291_1145215301.jpg?x=0&y=0&h=320&w=480&vh=320.00&vw=480.00&oh=320.00&ow=480.00"
                alt=""
              />
              <p>nova 11 SE</p>
            </div>
            <div class="demo">
              <img
                src="https://ms.bdimg.com/pacific/0/pic/-1170947291_1145215301.jpg?x=0&y=0&h=320&w=480&vh=320.00&vw=480.00&oh=320.00&ow=480.00"
                alt=""
              />
              <p>nova 11 SE</p>
            </div>
          </div>
          <div class="sj">
            <div class="demo">
              <img
                src="https://ms.bdimg.com/pacific/0/pic/-1170947291_1145215301.jpg?x=0&y=0&h=320&w=480&vh=320.00&vw=480.00&oh=320.00&ow=480.00"
                alt=""
              />
              <p>nova 11 SE</p>
            </div>
            <div class="demo">
              <img
                src="https://ms.bdimg.com/pacific/0/pic/-1170947291_1145215301.jpg?x=0&y=0&h=320&w=480&vh=320.00&vw=480.00&oh=320.00&ow=480.00"
                alt=""
              />
              <p>nova 11 SE</p>
            </div>
            <div class="demo">
              <img
                src="https://ms.bdimg.com/pacific/0/pic/-1170947291_1145215301.jpg?x=0&y=0&h=320&w=480&vh=320.00&vw=480.00&oh=320.00&ow=480.00"
                alt=""
              />
              <p>nova 11 SE</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'classify',
  data () {
    return {
      type: '新品',
      count: 0,
      placeholders: '微泵液冷手机壳',
      data: ['微泵液冷手机壳', 'FreeBuds Pro 3', '平板', 'mate60', '微泵', '手机', 'gt 4', '充电宝', 'p60', '乐臻版']
    }
  },
  methods: {
    toDetails (type) {
      console.log(type)
      this.type = type
    }
  },
  mounted () {
    setInterval(() => {
      this.count++
      if (this.count > this.data.length - 1) {
        this.count = 0
      }
      this.placeholders = this.data[this.count]
    }, 2000)
    }
}
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
.father {
  width: 450px;
  height: 100%;
  background-color: #fff;
}
.head {
  height: 58px;
  background-color: rgb(198, 200, 199);
}
.body {
  display: flex;
  height: 85%;
  background-color: #434b44;
}
.left {
  width: 25%;
  height: 612px;
  background-color: rgb(242, 242, 242);
  box-sizing: border-box;
  margin: 0;
  /* border: 1px solid red; */
  overflow: scroll;
}
.left::-webkit-scrollbar {
  display: none;
}
.right {
  width: 75%;
  height: 100%;
  background-color: rgb(242, 242, 242);
  box-sizing: border-box;
  margin: 0;
  overflow: scroll;
}
.left p {
  /* width: 100px; */
  margin-top: 25px;
  /* margin-left: 20px; */
  /* text-align: center; */
  font-size: 18px;
  padding-left: 20px;
  color: rgb(115, 118, 120);
  margin-top: 45px;
}
.right::-webkit-scrollbar {
  display: none;
}
.left_cilck {
  color: rgb(207, 10, 44);
  font-weight: 600;
  margin-top: 25px;

  border-left: 4px solid rgb(207, 10, 44);
  overflow: auto;
}
.box {
  width: 90%;
  /* height: 300px; */
  border-radius: 20px;
  background-color: white;
  margin: 0 auto;
  padding-left: 15px;
  overflow: hidden;
  margin-top: 15px;
}
.box h4 {
  margin-top: 15px;
}
.box img {
  width: 65px;
  height: 60px;
  display: block;
  margin: 0 auto;
}
.box p {
  font-size: 14px;
  text-align: center;
}
.sj {
  display: flex;
  justify-content: space-around;
  margin: 20px 0;
}
.lb img{
  width: 320px;
  height: 100px;
  border-radius: 20px;
  margin-left: 5px;
  margin-top: 10px;

}
.head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30px;
  background-color: rgb(242, 242, 242);
}
.head img{
  width: 30px;
  height: 30px;
}
.head input,.head img{
  display: block;
}
.head input{
  width: 300px;
  height: 39px;
  border-radius: 20px;
  border-color: transparent;
}
.item1{
  width:80%
}
.item2{
  width:20%;
}
</style>

